<template>
  <div class="app-portal-body">
    <div class="app-portal-menucontent" v-if="app">
      <report-forms
        :app-id="app.group_id"
        :selected-id="defaultFid"
        @select="handleSelectReportForm"
      />
    </div>
<!--    <div class="app-portal-content" v-if="currentData">
      <div class="app-portal-cnt-bd">-->
        <reports  v-if="currentData" :form="currentData"></reports>
<!--      </div>
    </div>-->
  </div>
</template>

<script setup>
import _ from 'lodash'
import reportForms from './modules/app-report-forms.vue';
import reports from '../basic/report/reports.vue';
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();

const props = defineProps({
  app: Object
});

const currentData = ref(null)
const defaultFid = ref(null)

onMounted(() => {
  init()
})

const init = () => {
  defaultFid.value = route.query.fid;
}

const handleSelectReportForm = (data) => {
  currentData.value = data;

  let formId = _.get(data, "form_id");

  if (formId) {
    router.push({
      name: 'portal-app-report',
      params: {
        appId: _.get(props.app, "group_id")
      },
      query: {
        fid: formId
      },
      replace: true
    });
  }
}
</script>
